html,body{
  width:100%;
  height:100%;
  font-size: calc(100vw/7.50);
  color: #000;
  background: #f6f6f6;
  overflow-y: scroll;
  font-family:Microsoft YaHei;
  -webkit-text-size-adjust: 100%;//iPhone在坚屏转向横屏时放大文字
  -ms-text-size-adjust: 100%;
}

@rem:50rem;
.height(@num){
  height:@num/@rem;
}

/*!*去除a标签点击样式*!*/
body{
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  -webkit-user-select: none;
  -moz-user-select: none;
  padding-top: constant(safe-area-inset-top);
  padding-left: constant(safe-area-inset-left);
  padding-right: constant(safe-area-inset-right);
  /*padding-bottom: constant(safe-area-inset-bottom);*/
}

*{
  padding:0;
  margin:0;
  list-style: none;
  -webkit-text-size-adjust: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0)
}

i,span,a{
  display:inline-block;
}

a{
  text-decoration:none;
  color:#000;
  cursor:pointer;
}

i{
  font-style:normal;
}

.line2{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  word-break:break-all;
  overflow: hidden;
}

.over{
  text-overflow:ellipsis;
  overflow:hidden;
  white-space:nowrap;
  word-break:break-all;
}

.clearfix{
  &::before,&::after{
    content: " ";
    display: table;
  }
  &::after{
    clear: both;
  }
}

.justify-content{
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  align-items: center;
}

::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  background-color: #f5f5f5;
}


#app{
  width:100%;
  height:100%;
}
/*头部*/
.top{
  width:auto;
  height:90/@rem;
  background: #1a1a1f;
  padding:0 24/@rem;
  font-size:36/@rem;
  line-height:90/@rem;
  color:#fff;
  position:relative;
  text-align: center;

  .return{
    position:absolute;
    top:0;
    left:0;
    padding-left:54/@rem;
    width:auto;
    height:100%;
    color:#fff;
    font-size:28/@rem;
    line-height:90/@rem;
    background:~"url(image/return_arrow.png)" 24/@rem center no-repeat;
    background-size:auto 48/@rem;
  }

  .oprate{
    position:absolute;
    top:0;
    right:0;
    width:94/@rem;
    height:100%;
    background:~"url(image/top_oprate.png)" center no-repeat;
    background-size:auto 10/@rem;
  }
}

.head{
  width:100%;
  height:90/@rem;
  background:#fedc00;
  font-size:32/@rem;
  color:#000;
  line-height:90/@rem;
  text-align: center;
}

.content{
  width:100%;
  height:auto;
}

//关注礼包页面attention_gift
#attention_gift{
  .banner{
    width:100%;
    height:auto;

    .el-carousel__container{
      width:100%;
      height:346/@rem;
    }

    a,img{
      display:block;
      width:100%;
      height:100%;
    }
  }

  .content_block{
    width:auto;
    height:auto;
    padding:0 24/@rem;
    margin-top:30/@rem;
  }

  .check-all{
    width:auto;
    height:76/@rem;
    background:#fff;
    border-radius: 10/@rem;
    border:1px solid #ededed;
    font-size:24/@rem;
    color:#73450e;
    line-height:76/@rem;

    i{
      width:62/@rem;
      height:100%;
      background:~"url(image/select_tip.png)" right center no-repeat;
      background-size:32/@rem auto;
      float:left;
      margin-right:10/@rem;
    }

    .check-all-btn{
      width:165/@rem;
      height:100%;
      float:right;
      position:relative;
      text-align:center;

      &::before{
        content:'';
        display:inline-block;
        width:1px;
        height:30/@rem;
        background:#dcdcdc;
        position:absolute;
        top:0;
        left:0;
        bottom:0;
        margin:auto;
      }

      //修改全选，不选样式
      .el-checkbox__inner{
        &::before,&::after{
          height:0;
          border:0;
        }
      }

      .el-checkbox{
         height:76/@rem;
         display:inline-block;
         text-align: center;
        .clearfix;

        .el-checkbox__input{
          width:29/@rem;
          height:100%;
          float:left;
          //margin-top:-14/@rem;

          .el-checkbox__inner{//未选中
            width:100%;
            height:100%;
            background:~"url('image/check-all-no.png') center no-repeat";
            background-size:29/@rem auto;
            border:0;
          }

          &.is-checked>.el-checkbox__inner{//选中
            .el-checkbox__inner;
            background:~"url('image/check-all-yes.png') center no-repeat";
            background-size:29/@rem auto;
          }

        }
      }
      //结束

      .el-checkbox__label{
        float:left;
        font-size:30/@rem;
        line-height:78/@rem;
        color:#242322;
        padding-left:10/@rem;
      }
    }
  }

  .gift-list{
    width:auto;
    height:auto;
    padding:0 30/@rem;

    .el-checkbox-group{
      .clearfix;
      height:100%;
    }

    .el-checkbox+.el-checkbox{
      margin-left:0;
    }

    //修改全选，不选样式
    .el-checkbox__inner{
      &::before,&::after{
        height:0;
        border:0;
      }
    }

    .el-checkbox{
      display:block;
      margin-top:50/@rem;
      height:167/@rem;

      .el-checkbox__input{
        width:58/@rem;
        height:100%;
        background:#dcdcdc;
        float:left;
        border-top-left-radius:10/@rem;
        border-bottom-left-radius:10/@rem;

        &.is-checked{
          background:#f39800;
        }

        .el-checkbox__inner{//未选中
          width:100%;
          height:100%;
          background:~"url('image/check-all-no.png') center no-repeat";
          background-size:29/@rem auto;
          border:0;
        }

        &.is-checked>.el-checkbox__inner{//选中
          .el-checkbox__inner;
          background:~"url('image/check-all-yes.png') center no-repeat";
          background-size:29/@rem auto;
        }
      }

      .el-checkbox__label{
        @calc:58/@rem;
        display:block;
        width:calc(~"100% - @{calc}");
        height:100%;
        float:left;
        padding-left:0;
        .clearfix;

        .gift-info{
          @calc:231/@rem;
          width:calc(~"100% - @{calc}");
          height:100%;
          background:#fff;
          padding:0 32/@rem;
          float:left;

          p{
            width:100%;
            height:100/@rem;
            font-size:28/@rem;
            color:#161616;
            line-height:100/@rem;
            .over;
          }

          span{
            font-size:20/@rem;
            color:#a8a8a8;
          }
        }

        .gift-look{
          width:167/@rem;
          height:100%;
          background:#9cc84e;
          float:left;
          position:relative;

          a{
            width:100%;
            height:100%;
            background:~"url('image/gift_look_bg.png') center no-repeat";
            background-size:140/@rem auto;
            text-align: center;
            vertical-align: middle;

            i{
              width:100%;
              height:100%;
              font-size:32/@rem;
              color:#fff;
              line-height:36/@rem;
              .justify-content;
            }
          }

          .circle{
            width:16/@rem;
            height:16/@rem;
            border-radius: 8/@rem;
            background:#f6f6f6;
            position:absolute;
            left:-8/@rem;

            &.up{
              top:-8/@rem;
            }
            &.down{
              bottom:-8/@rem;
            }
          }
        }
      }
    }
    //结束

  }

  .foot-btn{
    @calc:60/@rem;
    width:calc(~"100% - @{calc}");
    margin:126/@rem auto 86/@rem;
    height:72/@rem;
    border-radius:36/@rem;
    font-size:32/@rem;
    color:#fff;
    text-align: center;
    line-height:72/@rem;
    background: -webkit-linear-gradient(left, #8bbc05 , #70ab49); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, #8bbc05 , #70ab49); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, #8bbc05 , #70ab49); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, #8bbc05 , #70ab49); /* 标准的语法 */
  }
}

//礼包详情(sos)页面gift_info_sos/gift_info_milk
#gift_info_sos{
  #attention_gift > .banner;
  .banner .el-carousel__container{
    @calc:48/@rem;
    width:calc(~"100% - @{calc}");
    margin:40/@rem auto 0;
    height:225/@rem;
    border:10/@rem;
  };

  .content_block{
    width:auto;
    height:auto;
  }

  .gift-info-block{
    width:100%;
    height:auto;
    margin-top:40/@rem;

    .gift-info-title{
      width:auto;
      height:42/@rem;
      padding:24/@rem;
      background:#fff;
      font-size:30/@rem;
      color:#303033;
      position:relative;
      margin-bottom:20/@rem;

      span{
        padding-left:28/@rem;
        &::before{
          display:inline-block;
          content:"";
          width:13/@rem;
          height:42/@rem;
          background:#ffda00;
          border-radius:5/@rem;
          position:absolute;
          top:0;
          bottom:0;
          left:24/@rem;
          margin:auto;
        }
      }
    }

    .gift-info-content{
      @calc:96/@rem;
      width:calc(~"100% - @{calc}");
      height:auto;
      margin:0 auto;
      padding:24/@rem;
      border-radius:12/@rem;
      background:#fff;
      border:1px solid #f1f1f1;
      box-shadow:0 1px 0 0 #e6e6e6;
      font-size:24/@rem;
      color:#333;
      line-height:40/@rem;
    }
  }

  .foot-btn{
    #attention_gift > .foot-btn;
    width:43%;
    margin:55/@rem auto 70/@rem;
  }
}

//礼包详情(sos)页面gift_info_sos
#gift_info_add{
  .demo-ruleForm {
    @calc: 96/@rem;
    width: calc(~"100% - @{calc}");
    height: auto;
    padding: 10/@rem 24/@rem 30/@rem;
    margin: 40/@rem auto 0;
    border: 1px solid #ededed;
    box-shadow: 0 1px 0 0 #e6e6e6;
    border-radius: 12/@rem;
    background: #fff;

    .el-form-item {
      width: 100%;
      height: 90/@rem;
      border-bottom: 1px solid #f6f7f9;
      margin-bottom: 0;

      .el-form-item__label {
        width: 147/@rem;
        height: 90/@rem;
        padding: 0;
        padding-left: 13/@rem;
        font-size: 28/@rem;
        color: #333;
        line-height: 90/@rem;
        text-align: justify;
        position: relative;

        &::before {
          content: '*';
          position: absolute;
          left: 0;
          top: 0;
          color: #ef2828;
          font-size: 28/@rem;
        }

        &::after {
          width: 100%;
          height: 0;
          margin: 0;
          display: inline-block;
          overflow: hidden;
          content: '';
        }
      }

      .el-form-item__content {
        @calc: 160/@rem;
        width: calc(~"100% - @{calc}");
        margin-left: 160/@rem !important;
        position: relative;

        .el-input {
          font-size: 28/@rem;

          .el-input__inner {
            height: 90/@rem;
            border: 0;
            background:transparent;
          }

          &::before {
            content: ':';
            position: absolute;
            font-size: 28/@rem;
            top: 0;
            left: -10/@rem;
            height: 100%;
            line-height: 90/@rem;
          }
        }

        .el-radio-group {
          margin: 22/@rem 15px 22/@rem;

          &::before {
            content: ':';
            position: absolute;
            font-size: 28/@rem;
            top: 0;
            left: -10/@rem;
            line-height: 90/@rem;
          }
          .el-radio.is-bordered {
            width: 152/@rem;
            height: 54/@rem;
            border-radius: 8/@rem;
            border: 2/@rem solid #d6d6d6;
            font-size: 24/@rem;
            color: #333;
            padding: 0;
            text-align: center;
            line-height: 50/@rem;

            .el-radio__input {
              display: none;
            }

            .el-radio__label {
              font-size: 24/@rem;
              padding-left: 0;
              color: #333;
            }
          }

          .el-radio.is-bordered.is-checked {
            border-color: #feb300;
            color: #333;
            position: relative;

            &::before {
              content: '';
              width: 100%;
              height: 100%;
              background: ~"url('image/radio-check.png') top left no-repeat";
              background-size: 33/@rem auto;
              position: absolute;
              top: -2/@rem;
              left: -2/@rem;
            }
          }

          .el-radio.is-bordered + .el-radio.is-bordered {
            margin-left: 12/@rem;
          }

        }

        .el-select {
          width: 100%;

          .el-input .el-select__caret {
            color: #c8c8c8;
            font-size: 25/@rem;
            font-weight: bold;
          }

          .el-input__suffix {
            right: 0;

            .el-input__suffix-inner {
              height: 100%;

              .el-icon-arrow-up:before{
                height:100%;
                .justify-content;
              }
            }
          }
        }

        .el-input-group__append {
          background-color: transparent;
          border: 0;
          padding: 0;

          .code-img{
            width:142/@rem;
            height:55/@rem;
          }
        }

        .el-cascader{
          width:100%;
          font-size:28/@rem;
          color:#333;
          line-height:90/@rem;

          .el-input__icon {
            color: #c8c8c8;
            font-size: 25/@rem;
            font-weight: bold;
          }

          .el-input--suffix{
            padding: 0 25px 0 15px;
            width: calc(100% - 40px);
          }

          .el-input__suffix {
            right: 0;

            .el-input__suffix-inner {
              height: 100%;
            }
          }
        }
      }
    }
  }

  .foot-btn{
    #attention_gift > .foot-btn;
    width:43%;
    margin:130/@rem auto 114/@rem;
  }
}


#gift_info_add_body {
  .el-select-dropdown {
    margin: 0;
    .el-scrollbar {
      .el-select-dropdown__item {
        font-size: 24/@rem;
        color: #333;
        height: 50/@rem;
        line-height: 50/@rem;
        font-weight: normal;

        &.selected {
          color: #feb300;
        }
      }
    }
  }

  .el-popper[x-placement^=bottom] {
    margin-top: 0;
  }
  .el-popper[x-placement^=top] {
    margin-bottom: 0;
  }

  .el-cascader-menu__item {
    font-size: 24/@rem;
    color: #333;
    height: 50/@rem;
    line-height: 34/@rem;
    font-weight: normal;
    padding: 8/@rem 40/@rem 8/@rem 20/@rem;

    &.is-active {
      color: #feb300;
    }
  }

  .el-cascader-menu {
    min-width: 160/@rem !important;
    width:calc(100% / 3)!important;
  }
  .el-cascader-menu__item--extensible:after {
    right: 5px !important;
    font-size: 24/@rem;
  }

  .el-icon-arrow-down:before {
    height: 100%;
    .justify-content;
  }

  .el-cascader-menus{
    border:0;margin:0;
  }
  .el-cascader-menus.el-popper {
    width:100% !important;
    top: initial !important;
    left: 0 !important;
    bottom: 0;
    margin-bottom:0!important;

    .popper__arrow::after{
      border-width:0!important;
    }

    .popper__arrow{
      width:100%;
      height: 100%;
      position:fixed!important;
      top:0!important;
      left:0!important;
      background:rgba(0,0,0,0.3);
      margin:0;
      z-index:-1;
      border-width:0!important;
    }
  }
}


